<%--
  Created by IntelliJ IDEA.
  User: WeiHong
  Date: 2016/12/7
  Time: 11:18
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>用户信息列表</title>
    <%@include file="../common/common.jsp" %>
</head>
<body>
<script type="text/javascript">

    var columns = [[
        {field: 'id', title: 'id', width: 100},
        {field: 'userName', title: '姓名', width: 100},
        {field: 'password', title: '密码', width: 250}
    ]];

    /*加载列表*/
    $(function () {
        $('#userList-dg').datagrid({
            url: '${path}/userInfo/getUserInfo',
            columns: columns,
            fitColumns: true, //列宽自适应
            singleSelect: true, //只允许单选
            remoteSort: false,
            fit: true,
            pageSize:30,
            striped: true, //斑马行
            rownumbers: true, //显示行数
            pagination: true, //分页组件
            toolbar: "#userList-tb",
            onDblClickRow: function (index, row) {
                $("#editUserInfo1-wd").dialog({
                    title: "详情",
                    width: 400,
                    height: 200,
                    modal: true
                });
                $('#editUserInfo1-fm').form('load', row);
            }
        });
    });

    /*打开新增用户窗口*/
    function addUserInfo1() {
        $("#editUserInfo1-wd").dialog({
            title: "新增用户",
            width: 400,
            height: 200,
            modal: true
        });
        $("#editUserInfo1-fm").form('clear');
    }

    /*编辑用户*/
    function editUserInfo1() {
        /*获取选中行数据，如果选中多行，返回第一个被选中行*/
        var row = $("#userList-dg").datagrid('getSelected');
        if (row) {
            $("#editUserInfo1-wd").dialog({
                title: "详情",
                width: 400,
                height: 200,
                modal: true
            });
            $('#editUserInfo1-fm').form('load', row);
        } else {
            $.messager.alert("操作提示", "请选择一行后再操作！", "error");
        }

    }

    /*保存用户*/
    function savaUserInfo1() {
        if (!$("#editUserInfo1-fm").form('validate')) {
            return false;
        }
        var param = $("#editUserInfo1-fm").serialize();
        $.messager.progress();
        $.ajax({
            url: "${path}/userInfo/saveUserInfo",
            data: param,
            success: function (msg) {
                $.messager.progress('close');
                if (msg.result == "success") {
                    $.messager.alert("操作提示", "保存成功！", "info");
                    $('#editUserInfo1-wd').dialog('close');
                    $('#userList-dg').datagrid('reload');
                } else {
                    $.messager.alert("操作提示", "保存失败！", "error");
                }
            },
            error: function () {
                $.messager.progress('close');
                $.messager.alert("操作提示", "保存失败！", "error");
            }
        });
    }

    /*删除用户*/
    function deleteUserInfo1() {
        var row = $("#userList-dg").datagrid("getSelected");
        if (row) {
            $.messager.progress();
            $.ajax({
                url: "${path}/userInfo/deleteUserInfo/" + row.id,
                success: function (msg) {
                    $.messager.progress('close');
                    if (msg.result == "success") {
                        $.messager.alert("操作提示", "删除成功！", "info");
                        $('#userList-dg').datagrid('reload');
                    } else {
                        $.messager.alert("操作提示", "删除失败！", "error");
                    }
                },
                error: function () {
                    $.messager.progress('close');
                    $.messager.alert("操作提示", "删除失败！", "error");
                }
            });
        } else {
            $.messager.alert("操作提示", "请选择一行后再操作！", "error");
        }
    }
    /*清空查询表单*/
    function cleanSearch() {
        $("#search-fm").form('clear');
    }

    /*用户查询*/
    function searchUserInfo1() {
        /*清空所选行*/
        $('#userList-dg').datagrid('clearSelections');
        var param = $("#search-fm").serializeArray();
        debugger;
        $('#userList-dg').datagrid('load', {
            id: param[0].value,
            username: param[1].value
        });

    }
</script>
<%--显示列表--%>
<div id="userList-dg"></div>

<div id="userList-tb" style="display: none;">
    <!-- 搜索 -->
    <div>
        <form id="search-fm" style="padding: 10px;width: 100%; border-bottom: 1px solid #e0e0e0;">
            id：<input name="id" class="easyui-textbox" type="text" style="width:180px">
            姓名：<input name="username" class="easyui-textbox" type="text" style="width:180px">
            <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="searchUserInfo1()">查询</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="cleanSearch()">清空</a>
        </form>
    </div>
    <!-- 按钮 -->
    <table>
        <tr>
            <td>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="addUserInfo1()">新增</a>
            </td>
            <td>
                <div class="datagrid-btn-separator"></div>
            </td>
            <td>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit"
                   onclick="editUserInfo1()">编辑</a>
            </td>
            <td>
                <div class="datagrid-btn-separator"></div>
            </td>
            <td>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteUserInfo1()">删除</a>
            </td>
        </tr>
    </table>
</div>

<%--新增窗口--%>
<div id="editUserInfo1-wd" style="display: none" buttons="#addUserInfo1-bt">
    <form id="editUserInfo1-fm" style="padding: 10px;">
        <div class="fitem">
            <label style="width: 60px;">用户名：</label>
            <input class="easyui-textbox f-txt" name="username" data-options="required:true"/>
        </div>
        <div class="fitem">
            <label style="width: 60px;">密码：</label>
            <input class="easyui-textbox f-txt" name="password" data-options="required:true">
        </div>
    </form>
</div>
<%--新增按钮--%>
<div id="addUserInfo1-bt">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="savaUserInfo1()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:$('#editUserInfo1-wd').dialog('close')">取消</a>
</div>
</body>
</html>
